<template>
  <div class="g-wrap">
    <div class="u-cover-rank">
      <img v-lazy="RadioDetail.picUrl" alt="">
      <span class="msk"></span>
    </div>
    <div style="float: revert;width: 100%;">
      <div class="m-info">
        <div class="hd">
          <i class="hd-icon-song-list"></i>
          <div class="txt">
            <h2 class="f-fc2">{{RadioDetail.name}}</h2>
          </div>
        </div>
        <div class="user" v-if="RadioDetail.dj">
          <router-link :to="{name:'UserDetail',params:{id:RadioDetail.dj.userId}}" class="face" >
            <img  v-lazy="RadioDetail.dj.avatarUrl" alt="" >

          </router-link>
          <span class="name">
          <router-link :to="{name:'UserDetail',params:{id:RadioDetail.dj.userId}}" class="s-fs4" :title=" RadioDetail.dj.nickname">{{ RadioDetail.dj.nickname }}</router-link>
        </span>
          <img
              v-if="RadioDetail.dj.avatarDetail"
              v-lazy="RadioDetail.dj.avatarDetail.identityIconUrl"
              alt="" class="img">

        </div>
        <div class="btns">
          <a href="javascript:;" class="ply" style="margin-right: 5px">
            <i class="ply">
              订阅({{RadioDetail.subCount}})
            </i>
          </a>
          <a href="javascript:;">
            <i class="ply">播放全部</i>
          </a>
          <a href="javascript:;">
            <i class="ply">分享({{RadioDetail.shareCount}})</i>
          </a>
        </div>
        <p class="intr" >
          <router-link :to="{name:'DjRadioView',query:{id:RadioDetail.categoryId}}" class="cat">{{RadioDetail.category}}</router-link>
          <span v-if="RadioDetail.desc" v-html="RadioDetail.desc.replaceAll(/\n/g,'<br>')"></span>
          </p>

      </div>
    </div>
    <!--    <div class="f-cb">-->
    <!--      <a href="javascript:;" class="zhankai" v-if="isShow" @click="changeShow('up')">展开</a>-->
    <!--      <a href="javascript:;" class="zhankai" v-else @click="changeShow('down')">收起</a>-->
    <!--      <i :class="u_icn"></i>-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "index",
  props:['RadioDetail']
}
</script>

<style scoped lang="less">
.g-wrap {
  padding: 47px 30px 40px 39px;


  .u-cover-rank {
    width: 200px;
    height: 200px;
    position: relative;
    float: left;

    img {
      width: 200px;
      height: 200px;
    }

    span {
      width: 208px;
      height: 208px;
      position: absolute;
      background-position: 0 -1285px;
      top: -4px;
      left: -4px;
      background-image: url("../../../assets/coverall.png");
    }
  }

  .m-info {
    margin-left: 230px;

    .hd {
      position: relative;
      margin: 0 0 12px;
      line-height: 24px;

      .hd-icon-song-list {
        width: 55px;
        height: 24px;
        float: left;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        background-position: 0 -1014px;
        background-image: url("../../../assets/icon.png");
      }

      .txt {
        margin-left: 64px;
        position: relative;

        h2 {
          line-height: 24px;
          font-size: 20px;
          font-weight: normal;
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

        }
      }

    }

    .user {
      margin: 0 0 20px;
      line-height: 35px;

      .face {
        float: left;
        width: 35px;
        height: 35px;
        margin-right: 10px;

        img {
          float: left;
          width: 35px;
          height: 35px;
        }
      }

      .name {

        .s-fs4 {
          margin-right: 2px;
          color: #0c73c2;
        }
      }

      .img {
        height: 13px;
        width: 13px;
        display: inline-block;
        vertical-align: middle;
      }
    }

    .btns {
      width: 483px;
      height: 31px;
      margin-top: 20px;
      margin-bottom: 25px;

      .ply {
        background-repeat: no-repeat;
        background-image: url("../../../assets/button2.png");
      }

      a {
        display: inline-block;
        float: left;

        i {
          margin-right: 5px;
          font-family: simsun,\5b8b\4f53;
          color: #666;
        }

        &:nth-child(1) {

          background-position: right -428px;

          i {
            padding: 0 3px 0 29px;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            height: 31px;
            line-height: 31px;
            overflow: hidden;
            *line-height: 32px;
            vertical-align: top;
            text-align: center;
            cursor: pointer;
            color: #fff;
            background-position: 0 -2125px;
          }
        }
        &:nth-child(2) {
          i {
            background-position: 0 -2285px;
            float: left;
            height: 31px;
            line-height: 31px;
            min-width: 23px;
            cursor: pointer;
            padding: 0 7px 0 28px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-right: 1px solid #C3C3C3;
          }
        }

        &:nth-child(3) {
          i {
            background-position: 0 -1225px;
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            cursor: pointer;
            padding: 0 7px 0 28px;
            border-right: 1px solid #C3C3C3;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
          }
        }
      }
    }
  }

  .intr {
    margin-top: 4px;
    line-height: 18px;
    color: #666;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;

    .cat {
      color: #cc0000;
      margin-right: 7px;
      display: inline-block;
      position: relative;
      top: -1px;
      height: 16px;
      overflow: hidden;
      padding: 0 6px;
      border: 1px solid #cc0000;
      line-height: 16px;
      *line-height: 18px;
      vertical-align: middle;
      font-size: 12px;
      &:hover{
        background-color: #FBEEEE;
      }
    }
  }

  .f-cb {
    width: 100%;
    text-align: right;

    .zhankai {
      color: #0c73c2;
    }

    .u-icn-down {
      display: inline-block;
      width: 11px;
      height: 8px;
      background: url("../../../assets/icon.png") no-repeat -65px -520px;
    }

    .u-icn-up {
      display: inline-block;
      width: 11px;
      height: 8px;
      background: url("../../../assets/icon.png") no-repeat -45px -520px;
    }
  }
}
</style>